<template>
    <uni-popup ref="setDynamic" type="bottom">
        <div class="set_types">
            <div class="title">设置分类</div>
            <div class="types_list">
                <div class="sub_item" :class="{active: actDynaics.indexOf(item.id) > -1}" v-for="(item, index) in dynamicList" :key="index" @click="setDynamic('add', item)">
                    <p>{{item.industryName}}</p>
                </div>
            </div>
            <div class="btns">
                <div class="btn" @click="setDynamic('cancel')">暂无分类</div>
                <div class="btn" @click="setDynamic('confirm')">设置</div>
            </div>
        </div>
    </uni-popup>
</template>

<script>
import { editDynamicIndustrys, getDynamicIndustrys  } from '@/request/art'
export default {
    data() {
        return {
            dynamicId: '',
            actDynaics: [],
            dynamicList: [],
        }
    },
    methods: {
        open(options = {}) {
            this.dynamicId = options.dynamicId
            this.setDynamic('open')
        },
        setDynamic(type, item) {
            if(type == 'open') {
                getDynamicIndustrys().then(res => {
                    this.dynamicList = res.data.dynamicIndustys
                    this.$refs.setDynamic.open()
                })
            } else if(type == 'add') {
                let index = this.actDynaics.findIndex(i => item.id == i)
                if(index == -1) {
                    this.actDynaics.push(item.id)
                } else {
                    this.actDynaics.splice(index, 1)
                }
            } else if(type == 'confirm') {
                if(!this.actDynaics.length) return this.$interact.toast('请选择分类')
                editDynamicIndustrys({
                    industryIds: this.actDynaics.join(','),
                    dynamicId: this.dynamicId
                }).then(res => {
                    this.actDynaics = []
                    this.$refs.setDynamic.close()
                })
            } else if(type == 'cancel') {
                this.$refs.setDynamic.close()
            }
        },
    }

}
</script>

<style lang="less" scoped>

.set_types{
    width: 100%;
    max-height: 50vh;
    background: #fff;
    padding: 30rpx 0;
    border-radius: 20rpx 20rpx 0 0;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 99999;
    .title{
        width: 100%;
        height: 80rpx;
        font-weight: bold;
        font-size: 34rpx;
        color: #666;
        text-align: center;
    }
    .types_list{
        width: 100%;
        flex: 1;
        overflow: auto;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        .sub_item{
            width: 220rpx;
            height: 70rpx;
            background: #f1f1f1;
            margin-right: 20rpx;
            margin-bottom: 20rpx;
            border-radius: 10rpx;
            .align(center);
            &:nth-child(3n) {
                margin-right: 0;
            }
            &.active{
                background: #f3c4c5;
            }
        }


    }
    .btns{
        height: 140rpx;
        width: 100%;
        display: flex;
        padding: 0 50rpx;
        justify-content: space-between;
        align-items: flex-end;
        border-top: 1px solid #ddd;
        .btn{
            width: 300rpx;
            height: 80rpx;
            border-radius: 40rpx;
            background: @mainColor;
            color: #fff;
            .align(center);
            &:first-child{
                border: 1px solid #ddd;
                color: #333;
                background: #fff;
            }
            
        }
    }

}
</style>